<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>管理文件内容</title>
</head>

<body>
  <div>
    <h1>显示文件内容</h1>
    <input type="file" id="file-uploader" accept=".jpg, .jpeg, .png">
    <div id="image-grid"></div>
  </div>
</body>
<script>
  /* 
  您可以在成功上传文件后显示文件内容。对于个人资料图片，如果上传后不立即向用户展示上传的图片，会造成混乱。
我们可以使用 FileReader 对象将文件转换为二进制字符串。然后添加 load 事件侦听器，以在成功上传文件时获取二进制字符串。
  */

  /* 
  // 获取FileReader的实例
  const reader = new FileReader();

  fileUploader.addEventListener('change', (event) => {
    const files = event.target.files;
    const file = files[0];

    // 上传后获取文件对象并读取
    // 数据作为URL二进制字符串
    reader.readAsDataURL(file);

    // 加载后，对字符串进行处理
    reader.addEventListener('load', (event) => {
      // 在这里我们创建一个图像标签并添加图片
      const img = document.createElement('img');
      imageGrid.appendChild(img);
      img.src = event.target.result;
      img.alt = file.name;
    });
  });
  */


  const fileUploader = document.getElementById('file-uploader');
  const reader = new FileReader();
  const imageGrid = document.getElementById('image-grid');

  fileUploader.addEventListener('change', (event) => {
    const files = event.target.files;
    const file = files[0];
    console.log(file);
    reader.readAsDataURL(file);

    reader.addEventListener('load', (event) => {
      const img = document.createElement('img');
      imageGrid.appendChild(img);
      img.src = event.target.result;
      console.log(event.target.result);
      img.alt = file.name;
    });
  });/*  */
</script>

</html>